<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.top_context {
				width: 100%;
				height: 200px;
				background-color: white;
				line-height: 200px;
				text-align: center;
			}

			.sticky_element {
				width: 100%;
				height: 50px;
				background-color: black;
				color: aliceblue;
				line-height: 50px;
				text-align: center;
			}

			.main_context {
				height: 8000px;
				background-color: aquamarine;
			}

			/* 样式：吸顶灯卡页面顶部 */
			.sticky {
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script>
			//ready()事件源语法：$(document).ready(function(){});
			//              简写：$(function(){});
			//  总结：页面元素全部加载完毕，在执行JQ相关操作
			//  script元素放在最后一个body位置【可不写】
			$(function() {
				//鼠标移动到顶部内容区域---弹出文本：我是顶部元素
				//固定值：页面顶部到吸顶灯位置--BOM语法
				//offset()     获取或者设置元素相对于文档偏移量
				//offset().top   从顶部到吸顶灯元素的偏移量
				var se = $(".sticky_element").offset().top;

				//滚动值：BOM对象+事件源
				//$(window) 抓取页面window对象，监听窗口事件：窗口改变、滚动
				//理解：实时抓取页面滚动值
				$(window).scroll(function() {
					//滚动值：获取页面滚动位置
					//scrollTop()获取页面滚动垂直距离
					var st = $(window).scrollTop();

					//判断 滚动值大于固定值，滚动超过200px，实现切换：吸顶效果
					if (st > se) {
						//条件成立：大于200px   切换吸顶效果
						$(".sticky_element").addClass("sticky");
					} else {
						//条件不成立：小于200px
						$(".sticky_element").removeClass("sticky");
					}
				});

			});
		</script>
	</head>
	<body>
		<div class="top_context">
			顶部内容区域
		</div>
		<div class="sticky_element">
			我是吸顶元素
		</div>
		<div class="main_context">
			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam corporis illum accusantium vitae quam,
			aliquam eum provident distinctio autem dolor eos debitis similique voluptates a minus laudantium soluta
			ex commodi.lorem Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit soluta, mollitia nemo
			similique quod tenetur error laudantium eveniet beatae qui tempora cum? Incidunt totam impedit sit
			cupiditate libero aliquam adipisci. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta id
			dolorum atque sit ipsum ad laudantium quisquam quia, reiciendis tempora. Sunt, eveniet ipsam officiis
			amet sequi nulla qui deserunt facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sequi
			numquam error? Alias enim, quis ipsam nostrum molestias explicabo quod maxime velit facere ratione
			laudantium ducimus eveniet beatae qui officia.
		</div>

	</body>
</html>
<!--       吸顶灯效果---【了解】BOM案例：浏览器6个对象的方法使用
           思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
                2.页面顶部到吸顶灯位置：200px,大于200px
				3.追加第一个样式：固定定位，页面顶部位置

				1.追加样式：吸顶灯卡页面顶部
				2.固定值：页面顶部到吸顶灯样式 
				3.固定值>滚动值，滚动范围超出200px 实现切换
	  -->